<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        watch与computed的对比
            1. computed 能做的事情，watch都能做
            2. 推荐使用 computed 的原因
                2.1 代码量更少
            3. computed 必须要有返回值，watch 没这个概念
            4. watch中可以有异步代码，computed中不能搞异步

        computed与methods的对比
            1. computed 能做的事情，methods都能做
            2. computed 有缓存。

        需求：
            1. v-model 绑定了一个 msg 
            2. msg 发生变化时，需要调接口获取数据

            watch

        需求：
            1. firtstName 与 lastName 发生变化时，隔一秒显示 fullName
     -->

    <div id="app">
        <p>姓：<input type="text" v-model="firstName"></p>
        <p>名：<input type="text" v-model="lastName"></p>

        <!-- <p>全名：{{ firstName }} {{ lastName }}</p> -->
        <p>全名：{{ fullName }}</p>
        <p>全名：{{ fullName }}</p>
    </div>

    <script src="./js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                firstName: '张',
                lastName: '三',
            },
            computed: {
                fullName() {
                    // 错误的
                    // return setTimeout(() => {
                    //     return this.firstName + this.lastName
                    // }, 1000)

                    return this.firstName + this.lastName
                }
            }
        })
    </script>
</body>
</html>